<!--脚本：写js的地方-->
<script>
//导入消息组件
import {ElMessage} from "element-plus";

export default {
  name: "Login",
  /*model*/
  data(){
    return{
      account:'admin',
      password: '123456'
    }
  },
  /*统一定义函数的地方*/
  methods:{
    login(){
      //校验登录的数据
      if(this.account===null || this.account===''){
        //使用消息框
        ElMessage({
          message:'账户不能为空',
          type: 'error'
        })
        return;
      }
      if(this.password===null || this.password===''){
        ElMessage({
          message:'密码不能为空',
          type: 'error'
        })
        return;
      }
      if(this.password.length < 6 || this.password.length > 12){
        ElMessage({
          message:'密码长度为6-12位',
          type: 'error'
        })
        return;
      }
      //封装登录数据成formData
      let formData = new FormData();
      formData.append('account',this.account)
      formData.append('password',this.password)
      //通过校验，需要提交数据到后端
      /*axios.post('/api/emp/login',formData).then(resp=>{
        console.log(resp)
        if(resp.code===20000){
          //登录成功
          ElMessage({
            message: '登录成功',
            type: 'success'
          })
          //获取token
          let token = resp.data.token;
          //存储在本地
          localStorage.setItem('token',token);
          //获取员工名称
          let empName  = resp.data.empName;
          //获取头像
          let avatar = resp.data.avatar;
          //2.将员工名称和头像存储在状态管理器中
          let empStore = useEmpStore();
          empStore.setEmpName(empName)
          empStore.setAvatar(avatar)
          //跳转路由
          this.$router.push('/main')
        }else{
          //登录失败
          ElMessage({
            message: '登录失败',
            type: 'error'
          })
        }

      }).catch(error=>{
        console.log(error)
      })*/

      //直接路由到主页面
      this.$router.push('/main')

    }
  }
}
</script>
<!--视图：展示数据的地方，写标签，渲染数据-->
<template>
  <div class="container">
    <div class="login-form">
      <h2 class="title">你瞅啥后台管理平台</h2>
      <h3 class="title">用户登录</h3>
      <form   class="form" action="#" onsubmit="return false;">
        <div class="form-item">
          <img src="@/assets/user.png" style="color:#ccc"/>
          <input type="text" v-model="account" name="username" placeholder="请输入账户"/>
        </div>
        <div class="form-item form-password">
          <img src="@/assets/lock.png" style="color:#ccc"/>
          <input type="password" v-model="password" name="password" placeholder="请输入密码"/>
        </div>
        <div class="forget-pwd">
          <a href="javascript:void(0)" @click="this.$router.push('/forget')">忘记密码?</a>
        </div>
        <div class="login-btn">
          <button @click="login">登&nbsp;&nbsp;&nbsp;录</button>
        </div>
      </form>
    </div>
  </div>
</template>

<!--写样式的地方 scoped：作用域，代表定义的样式只能在这个组件中生效-->
<style scoped>
.container{
  margin:0;
  height:100vh;
  background-color: #4ECAF6;
  display: flex;
  justify-content: center;
}
/*登录区域*/
.login-form{
  width:390px;
  height:480px;
  border:1px solid #CCC;
  margin-top:5%;
  border-radius: 10px;
  background-color: #FFF;
}
/*登录的标题*/
.title{
  text-align: center;
}
h2{
  margin-top:60px;
}
/*表单*/
.form{
  margin-top:60px;
}
/*表单项*/
.form-item{
  width:280px;
  height:30px;
  border-bottom:1px solid #ccc;
  margin: 0 auto;
  display: flex;
  padding-bottom:5px;
}
.form-item input{
  width:240px;
}
input{
  border:none;
  font-size:16px;
  margin-left:10px;
}
input:focus{
  outline:none;
  font-size:16px;
  color: #1717dc;
}
.form-password{
  margin-top:30px;
}
.forget-pwd{
  margin-top:30px;
  text-align:right;
  width:330px;
}
.forget-pwd a{
  color: #1C9CFA;
}
.login-btn{
  width:300px;
  margin:20px auto 0;
  text-align:center;
}
.login-btn button{
  width:260px;
  height:34px;
  border:none;
  background-color: #71D5F8;
  color:#FFF;
  border-radius: 5px;
}
.login-btn button:hover{
  background-color: #7edafa;
  cursor: pointer;
}
</style>